<template>
  <section class="yl-clearfix">
    <div class="searchgrid">
      <select class="yl-select-option yl-float-left" v-model="filters.transfer_type" @change="getClientRecharges">
        <option :value="null">请选充值来源</option>
        <option v-for="(item,idx) in transferTypeOptions" :key="item" :value="idx" v-text="item"></option>
      </select>
      <select class="yl-select-option yl-float-left" v-model="filters.status" @change="getClientRecharges">
        <option :value="null">请选充值状态</option>
        <option v-for="(item,idx) in statusOptions" :key="item" :value="idx" v-text="item"></option>
      </select>
      <div class="yl-float-right">
        <input class="yl-input-text" v-model="filters.keyword" type="text"
               placeholder="客户手机号/客户真实姓名">
        <input class="yl-input-button" value=" 查询 " type="button" @click="getClientRecharges">
      </div>
    </div>
    <!--列表-->
    <el-table :data="pagination.data"
              v-loading="loading"
              style="width: 100%;">

      <el-table-column type="id" prop="id" label="充值单号">
      </el-table-column>

      <el-table-column prop="client.nick_name" label="充值用户">
        <template scope="scope">
          <span v-if="scope.row.client">{{scope.row.client.real_name}}{{scope.row.client.cellphone}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="created_time" label="充值时间">
      </el-table-column>
      <el-table-column prop="arrival_time" label="到账时间">
      </el-table-column>
      <el-table-column prop="amount_of_account" label="充值金额">
      </el-table-column>
      <el-table-column prop="fee" label="充值手续费"></el-table-column>
      <el-table-column label="到账金额">
        <template scope="scope">
          {{scope.row.amount_of_account - scope.row.fee}}
        </template>
      </el-table-column>
      <el-table-column label="充值来源">
        <template scope="scope">
          {{transferTypeOptions[scope.row.transfer_type]}}
        </template>
      </el-table-column>
      <el-table-column label="充值状态">
        <template scope="scope">
          {{statusOptions[scope.row.status]}}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>

      <el-table-column label="操作" v-if="isUserSystemAdmin">
        <template scope="scope">
          <el-button size="mini" @click="segueToClientRechargeAudit(scope.row)" v-if="scope.row.status == 4" title="账户审核"><i class="fa fa-pencil"></i></el-button>
        </template>
      </el-table-column>
    </el-table>


    <div class="yl-pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
        :current-page="pagination.current_page"
        :page-sizes="[15, 30, 45, 60]"
        layout="total, sizes, prev, pager, next, jumper"
        :page-size="parseInt(pagination.per_page)"
        :total="pagination.total"
        style="float:right;">
      </el-pagination>
    </div>

  </section>


</template>

<script>
  import {fetchClientRechargeList} from '../../api/client';

  export default {
    data() {

      return {
        filters: {
          range: null,
          keyword: null,
          status: null,
          transfer_type: null,
          page: 1,
          size: 15,
        },
        statusOptions: [
          '已提交',//0,
          '成功',//1,
          '失败',//2,
          '充值退回',//3,
          '处理中',//4
        ],
        transferTypeOptions: [
          'ATM',//0,
          '柜台',//1,
          '网银',//2,
          '手机银行',//3,
          '支付宝',//4,
          '其他',//5
        ],
        pagination: {},
        loading: false,
      };
    },
    methods: {
      handleSizeChange(size) {
        this.filters.page = 1;
        this.filters.size = size;
        this.getClientRecharges();
      },
      handlePageChange(clickPageIndex) {
        //分页页面发生改变
        this.filters.page = clickPageIndex;
        this.getClientRecharges();
      },
      segueToClientRechargeAudit(row) {
        this.$router.push({name: '客户充值审核', params: {id: row.id}});
      },
      //获取用户列表
      getClientRecharges() {
        this.loading = true;
        fetchClientRechargeList({params: this.filters}).then((res) => {
          this.pagination = res.data;
          this.loading = false;
        }).catch(error => {
          flashAxiosCatchError(error, this);
          this.loading = false;
        });
      },
    },
    mounted() {
      this.getClientRecharges();
    },
  };
</script>

